<template>
  <el-dialog
    v-model="showDialog"
    :title="popTitle"
    width="500px"
    :close-on-click-modal="false"
    :destroy-on-close="true"
  >
    <el-form
      ref="formRef"
      v-loading="loading"
      :model="formData"
      :rules="formRules"
      label-width="90px"
      class="page-form"
    >
      <el-form-item :label="t('type_name')" prop="type_name">
        <el-input
          v-model.trim="formData.type_name"
          :placeholder="t('typesNamePlaceholder')"
          maxlength="50"
          show-word-limit
          clearable
          class="input-width"
        />
      </el-form-item>
      <el-form-item :label="t('sort')" prop="sort">
        <el-input-number
          v-model="formData.sort"
          ::step="1"
          step-strictly
          :value-on-clear="0"
          :min="0"
          class="input-width"
          :placeholder="t('sortPlaceholder')"
        />
      </el-form-item>
      <el-form-item v-if="formId != 0" :label="t('status')">
        <el-radio-group v-model="formData.status">
          <el-radio :value="1">{{ t("statusUnlock") }}</el-radio>
          <el-radio :value="0">{{ t("lock") }}</el-radio>
        </el-radio-group>
      </el-form-item>
    </el-form>

    <template #footer>
      <span class="dialog-footer">
        <el-button @click="showDialog = false">{{ t("cancel") }}</el-button>
        <el-button type="primary" :loading="loading" @click="confirm(formRef)">
          {{ t("confirm") }}
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import { ref, reactive, computed, toRaw } from "vue";
import { t } from "@/lang";
import type { FormInstance } from "element-plus";
import { ElMessage } from "element-plus";
import { addTypeApi, editTypeApi } from "@/app/api/alcohol";
import { deepClone } from "@/utils/common";

const showDialog = ref(false);
const loading = ref(false);
let popTitle: string = "";

/**
 * 表单数据
 */
const formId = ref<number>(0);
const initialFormData = {
  type_name: "",
  sort: "",
  status: null,
};
const formData: Record<string, any> = reactive({ ...initialFormData });

const formRef = ref<FormInstance>();

// 表单验证规则
const formRules = computed(() => {
  return {
    type_name: [{ required: true, message: t("typesNamePlaceholder"), trigger: "blur" }],
  };
});

const emit = defineEmits(["complete"]);

/**
 * 确认
 * @param formEl
 */
const confirm = async (formEl: FormInstance | undefined) => {
  if (loading.value || !formEl) return;
  await formEl.validate((valid) => {
    if (valid) {
      loading.value = true;
      const data = deepClone(toRaw(formData));
      if (formId.value) {
        editTypeApi(formId.value, data)
          .then(() => {
            showDialog.value = false;
            emit("complete");
          })
          .finally(() => {
            loading.value = false;
          });
      } else {
        addTypeApi(data)
          .then(() => {
            showDialog.value = false;
            emit("complete");
          })
          .finally(() => {
            loading.value = false;
          });
      }
    }
  });
};

const setFormData = (row: any = null) => {
  loading.value = true;
  Object.assign(formData, initialFormData);

  if (row) {
    popTitle = t("updateTypes");
    formId.value = row.id;
    Object.keys(formData).forEach((key: string) => {
      if (row[key] != undefined) formData[key] = row[key];
    });
  } else {
    popTitle = t("addTypes");
    formId.value = 0;
  }
  loading.value = false;
};

defineExpose({
  showDialog,
  setFormData,
});
</script>

<style lang="scss" scoped></style>
